import { Avatar, Badge } from 'antd';
import { AlertOutlined, FundOutlined, FileOutlined, DatabaseOutlined, ApiOutlined } from '@ant-design/icons';
import './index.css';


const iconMap = { MessageBox: <AlertOutlined />, Heap: <FundOutlined />, File: <FileOutlined />, Registry: <DatabaseOutlined />, Socket: <ApiOutlined /> }

const MessageDetail = (props) => {
  const { message, messageStatus } = props;
  const iconType = iconMap[message.hook_type]

  return (
    <div style={{ backgroundColor: 'white' }}>
      <div className="top">
        <div className='icon'>
          <Avatar icon={iconType} size={'large'} style={{ backgroundColor: 'skyblue' }}>
          </Avatar>
        </div>
        <div className='title'>{message.api_name}</div>
      </div>
      <div className="content" >
        <div className='data'>
          <div style={{ fontWeight: 'bold', textAlign: 'center' }}>函数参数</div>
          {
            message.args && Object.keys(message.args).map((key, index) => {
              return (
                // <div style={{ color: 'grey' }} key={index}>{key}:{message.args[key]}</div>
                <div key={index}>
                  <span>{key}:</span>
                  <span style={{ color: 'grey' }}>{message.args[key]}</span>
                </div>
              )
            })
          }
        </div>
        <div className='status'>
          <div style={{ fontWeight: 'bold', textAlign: 'center', marginBottom:'10px' }}>状态</div>
          {
            messageStatus.map((item, index) => {
              return (
                <div key={index} style={{marginBottom:'10px'}}>
                  <Badge overflowCount={1000} count={item.code} color={item.code>=200?(item.code>=300?'red':'orange'):'rgb(45, 183, 245)'} />
                  <span style={{ color: 'grey',marginLeft:'20px' }}>{item.message}</span>
                </div>
              )
            })
          }
        </div>
      </div>

    </div>
  );
}

export default MessageDetail;